<template>
	<view>
		<wx-load-more 
			ref="loadMore" 
			:filterDataF="filterData" 
			:mTotalDataF="mTotalData" 
			:dataLists="dataLists"
			@provider="provider" 
			@resData="resData" 
			:pageSize="10"
		>
			<template v-slot:list="{ items,filterData,mTotalData }">
				<block v-for="(value, key, index) in filterData" :key="index">
					<view class="u-margin-bottom-20">
						<view class="white-bg u-padding-20" style="background: #f0f0f0;">
							<view style="font-size: 38rpx;">{{ key }}</view>
							<view style="font-size: 32rpx;">总计支出：{{ mTotalData[key] }}</view>
						</view>
						<view>
							<view 
								@click="expendDetail(item)" 
								hover-class="h-class" 
								class="u-flex u-padding-30 white-bg expend-item" 
								v-for="(item,index1) in filterData[key]" :key="index1"
							>
								<view class="u-flex-1">
									<view class="z-font-lg">{{ item.revenue_type }}支付-{{ item.revenue_company }}</view>
									<view class="u-margin-top-10" style="color: #999;">
										{{ item.mAndDay }}
										<u-tag
											shape="circle"
											size="mini"
											:text="item.check_status == -1 ? '待审核' : (item.check_status == 1 ? '通过' : '未通过')" 
											:type="item.check_status == -1 ? 'info' : (item.check_status == 1 ? 'success' : 'error')" 
										/>
									</view>
								</view>
								<view style="font-weight: bold;" class="z-font-lg u-margin-left-20">总计：-{{ item.total }}</view>
							</view>
						</view>
					</view>
				</block>
			</template>
		</wx-load-more>
	</view>
</template>

<script>
	import wxLoadMore from '@/components/wx-load-more/wx-load-more.vue';
	import inDateFilterData from "@/common/inDateFilterData.js";
	import {mapState} from 'vuex';
	export default {
		components: {
			wxLoadMore
		},
		data() {
			return {
				projectID: "",
				dataLists: [],
				filterData: {}, //按月格式化数据
				mTotalData: {}, //月资金总计
				addField: ['worker_cost', 'drill_freight', 'fuel_oil', 'parts_cost'] //需要计算的字段
			}
		},
		onLoad(params) {
			this.projectID = params.projectID;
		},
		mounted() {
			this.$refs.loadMore.reLoadData();
		},
		computed: {
			...mapState({
				token: "token"
			})
		},
		onPullDownRefresh() {
			this.$refs.loadMore.pullDownRefresh()
		},
		onReachBottom() {
			this.$refs.loadMore.reachBottom()
		},
		methods: {
			async provider(e) {
				let {pageNo,pageSize} = e;
				let {token,projectID} = this
				this.$loading("正在加载")
				let res = await this.$network({
					api: "main",
					data: {
						action:"projectAdmin/getProjectExpend",
						data:{token,projectID,pageNo,pageSize}
					}
				})
				uni.hideLoading();
				if (res.status === 0) {
					this.$refs.loadMore.pushData(res.data);
				} else if (res.status === 1) {
					this.$refs.loadMore.pushData([]);
				}
			},
			resData(dataLists) {
				this.dataLists = dataLists;
				let result = inDateFilterData(this.dataLists, this.addField);
				this.mTotalData = result.mTotalData;
				this.filterData = result.filterData;
			},
			expendDetail(item){
				uni.navigateTo({
					url:`../moneyDetail/moneyDetail?data=${encodeURIComponent(JSON.stringify(item))}&type=expend`
				})
			}
		}
	}
</script>
<style scoped>
	.expend-item{
		position: relative;
	}
	.expend-item::after{
		content: "";
		height: 1rpx;
		background: #f6f6f7;
		position: absolute;
		bottom: 4rpx;
		left: 30rpx;
		right: 30rpx;
	}
</style>
